{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
    <h2 class="mb-4">会议室预约状态</h2>
    
    <div class="card shadow">
        <div class="card-body">
            {% for room_data in room_status %}
            <div class="room-section mb-5">
                <h4 class="mb-3">
                    {{ room_data.room.name }} 
                    <small class="text-muted">(容量: {{ room_data.room.capacity }}人)</small>
                </h4>
                
                {% if room_data.bookings %}
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>日期</th>
                                <th>时间段</th>
                                <th>预约人</th>
                                <th>用途</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for booking in room_data.bookings %}
                            <tr class="{% if booking.status == 'approved' %}table-success{% elif booking.status == 'rejected' %}table-danger{% endif %}">
                                <td>{{ booking.date.strftime('%Y-%m-%d') }}</td>
                                <td>
                                    {{ booking.start_time.strftime('%H:%M') }} 
                                    - 
                                    {{ booking.end_time.strftime('%H:%M') }}
                                </td>
                                <td>{{ booking.student_name }} ({{ booking.student_id }})</td>
                                <td class="text-truncate" style="max-width: 200px;">
                                    {{ booking.purpose }}
                                </td>
                                <td>
                                    <span class="badge rounded-pill 
                                        {% if booking.status == 'approved' %}bg-success
                                        {% elif booking.status == 'rejected' %}bg-danger
                                        {% else %}bg-secondary{% endif %}">
                                        {{ booking.status }}
                                    </span>
                                    {% if booking.reason %}
                                    <div class="text-muted small mt-1">
                                        {{ booking.reason }}
                                    </div>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="alert alert-info mb-0">
                    当前没有预约记录
                </div>
                {% endif %}
            </div>
            <hr class="my-4">
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}
